<template>
  <view class="container">
    <custom-navbar backText="销售单" @back="goBack" :immersive="true"></custom-navbar>
    <view class="container_header" :style="{ paddingTop: `${navbarHeight}px` }">
      <view class="container_header_search">
        <uni-search-bar @confirm="search" @input="input" v-model="params.keyword" placeholder="请输入" cancelButton="none"
          bgColor="#fff" radius="30" class="container_header_search_input">
        </uni-search-bar>
        <button class="container_header_search_add" @click="add">新建</button>
      </view>
    </view>
    <view class="container_main">
      <!-- :refresher-enabled="true"
		@refresherrefresh="refresh" -->
      <scroll-view class="container_main_scroll" :scroll-y="true" @scrolltolower="loadMore">
        <view class="container_main_scroll_list" v-for="(item, index) in list" :key="index" @click="goUpdate(item)">
          <saleItem :item="item"></saleItem>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import {
    saleList
  } from "@/api/home.js";
  import saleItem from "@/components/saleItem.vue";
  import navbarMixin from '@/mixins/navbar.js'
  export default {
    components: {
      saleItem,
    },
    mixins: [navbarMixin],
    data() {
      return {
        list: [],
        params: {
          keyword: "",
          page: 0,
          size: 20,
          sort: 'createTime,desc'
        },
        isLoading: false,
        noMoreData: false,
      };
    },
    onLoad(option) {
      this.getMouldList();
    },
    methods: {
      search(event) {
        console.log("event-----" + JSON.stringify(event));
        this.params.keyword = event;
        this.refresh();
      },
      input(event) {
        console.log("event-----" + JSON.stringify(event));
        this.params.productCode = event;
        this.refresh();
      },
      refresh() {
        this.params.page = 0;
        this.list = [];
        this.getMouldList();
      },
      getMouldList() {
        if (this.isLoading) return;
        this.isLoading = true;
        uni.showLoading({
          title: "加载中",
        });
        saleList(this.params)
          .then((res) => {
            this.isLoading = false;
            uni.hideLoading();
            console.log("mould---------" + res);
            this.list = this.list.concat(res.content);
            this.noMoreData = res.content.length < this.params.size;
          })
          .catch((e) => {
            uni.hideLoading();
            this.isLoading = false;
            uni.showToast({
              title: e.msg,
              icon: "none",
            });
          });
      },
      loadMore() {
        console.log("loadmore");
        if (this.isLoading || this.noMoreData) return;
        this.params.page++;
        this.getMouldList();
      },
      goDetail(item) {
        uni.navigateTo({
          url: "/pages/mount/index?productId=" +
            item.id +
            "&name=" +
            item.productCode,
        });
      },
      add() {
        uni.navigateTo({
          url: "/pages/sale/update",
          events: {
            // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
            acceptDataFromOpenedPage: (data) => {
              this.refresh();
            },
          },
        });
      },
      goBack() {
        uni.navigateBack({
          delta: 1, // 返回的页面数，如果delta大于现有页面数，则返回到首页
        });
      },
      goUpdate(item) {
        uni.navigateTo({
          url: `/pages/sale/update?item=${encodeURIComponent(
          JSON.stringify(item)
        )}`,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    background: #f4f5f9;
    display: flex;
    flex-direction: column;

    &_header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;

      &_search {
        padding-right: 20rpx;
        border-radius: 10rpx;
        display: flex;
        align-items: center;

        &_input {
          flex: 1;
          border-radius: 30rpx;
        }

        &_add {
          width: 120rpx;
          height: 60rpx;
          line-height: 60rpx;
          background-color: #1890ff;
          color: white;
          font-size: 28rpx;
          border-radius: 30rpx;
        }
      }
    }

    &_main {
      flex: 1;
      padding-bottom: 20rpx;
      overflow-y: auto;

      &_scroll {
        height: 100%;

        &_list {
          margin: 20rpx;
          border-radius: 10rpx;
        }
      }
    }
  }

  button::after {
    border: none;
  }
</style>